<!--
数据源-产品
-->
<template>
  <div>
    <el-form v-model="dataSource" label-width="100px">
      <el-form-item label="产品">
        <el-select clearable
                   v-model="form.productId"
                   filterable
                   remote
                   reserve-keyword
                   placeholder="请输入关键词"
                   :remote-method="getProductList"
                   :loading="loading" @change="productSelectChange">
          <el-option
            v-for="item in productList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备" v-if="form.productId">
        <el-radio-group v-model="form.deviceSelectType" @change="radioChange">
          <el-radio-button label="dynamic">动态设备</el-radio-button>
          <el-radio-button label="static">指定设备</el-radio-button>
        </el-radio-group>
        <el-input :disabled="form.deviceSelectType==='dynamic'" v-model="form.deviceCode">
          <template slot="prepend">deviceCode=</template>
        </el-input>
      </el-form-item>
      <el-form-item label="属性" v-if="form.productId">
        <!-- 多选产品属性 -->
        <template v-if="dataType==='json'">
          <el-input clearable v-model="query" @keyup.enter.native="getAttrList"></el-input>
          <el-table ref="attrTable" border height="400"
                    :data="attrList" size="mini" v-loading="loading2"
                    @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column label="标识符" prop="code"></el-table-column>
            <el-table-column label="属性名称" prop="name"></el-table-column>
            <el-table-column label="数据类型" prop="dataType"></el-table-column>
          </el-table>
        </template>


        <!-- 单选产品属性 -->
        <el-select v-else clearable
                   v-model="form.attr"
                   filterable
                   reserve-keyword
                   placeholder="请选择"
                   :loading="loading2" @change="">
          <el-option
            v-for="item in attrList"
            :key="item.id"
            :label="item.name+' ['+item.code+']'"
            :value="item.code">
          </el-option>
        </el-select>


      </el-form-item>

    </el-form>
  </div>
</template>
<script>
  import {listProduct} from "@/api/biz/product";
  import {listFunc} from "@/api/biz/productFunc";
  import dataLoader from "./dataLoader";
  // import propsync from '@/mixins/propsync';

  export default {
    name: 'vpd-ds-device',
    title: '设备',
    dataLoader: dataLoader,

    // mixins: [propsync],
    props: {
      dataType: { //期望的数据类型
        type: String,
        default: 'json'
      },
      dataSource: {
        type: Object
      }
    },
    data() {
      return {
        loading: false,
        loading2: false,
        productList: [],
        attrList: [],
        multipleSelection: [],

        query: '',

        form: {
          productId: '',
          deviceSelectType: 'dynamic',
          deviceCode: '&deviceCode',
          attr: '', //单个属性
          attrList: [] //多个属性
        }
      }
    },
    computed: {},
    watch: {},
    beforeMount() {
      Object.assign(this.form, this.dataSource);
      this.getProductList();
      if (this.form.productId) {
        this.getAttrList();
      }
    },
    methods: {

      getForm() {
        this.form.attrList = this.multipleSelection
          .filter(row => Boolean(row))
          .map(row => {
            return {
              code: row.code,
              name: row.name,
            }
          });
        return this.form;
      },
      getProductList(query) {
        this.loading = true;
        listProduct({name: query}).then(response => {
          this.productList = response.rows;

        }).finally(() => {
          this.loading = false;
        })
      },
      getAttrList() {
        this.loading2 = true;
        listFunc({
          searchValue: this.query,
          productId: this.form.productId,
          type: 'attr'
        }).then(response => {
          this.attrList = response.rows;

          if (this.form.attrList) {
            this.$nextTick(() => { //选中
              const table = this.$refs.attrTable;
              this.form.attrList.forEach(item => {
                const row = this.attrList.find(r => r.code === item.code);
                table.toggleRowSelection(row);
              });
            })
          }


        }).finally(() => {
          this.loading2 = false;
        })
      },
      radioChange(val) {
        if (val === 'dynamic') {
          this.form.deviceCode = '{deviceCode}';
        } else {
          this.form.deviceCode = '';
        }
      },
      productSelectChange(val) {
        this.form.attr = '';
        this.getAttrList();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;

      }
    },

  }
</script>
